{% extends "base.html" %}
{% load i18n %}
{% load static %}
{% comment %} {% load common_tags %} {% endcomment %}
{% load icons %}
{% block content %}
<div class="page-wrapper">
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Computes
                    </div>
                    <h2 class="page-title">
                        {% trans "Computes" %}
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Page body -->
    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-header">
                    <div class="card-actions">
                        {% if request.user.is_superuser %}
                            {% include 'create_comp_block.html' %}
                        {% endif %}
                    </div>
                </div>

                <div class="card-body">
                    <div id="table-default" class="table-responsive">
                    <table id="computesTable" class="table card-table table-vcenter text-nowrap">
                        <thead>
                            <tr>
                                <th span="col" class="col-sm-3 text-center">{% trans "Name" %}</th>
                                <th span="col" class="col-sm-2 text-center">{% trans "Status" %}</th>
                                <th span="col" class="col-sm-5">{% trans "Details" %}</th>
                                <th span="col" class="col-sm-2 text-center">{% trans "Actions" %}</th>
                            </tr>
                        </thead>
                        <tbody class="searchable">
                            {% for compute in computes %}
                            <tr>
                                <td class="col-sm-3 text-center">
                                    {% if compute.status is True %}
                                        <a class="text-blue" href="{% url 'overview' compute.id %}">{{ compute.name }}</a>
                                    {% else %}
                                        <a class="text-reset">{{ compute.name }}</a>
                                    {% endif %}          
                                </td>
                                <td class="col-sm-2 text-center">
                                    {% if compute.status is True %}
                                        <span class="text-green">{% trans "Connected" %}</span>
                                    {% else %}
                                    <span class="text-red">{% trans "Not Connected" %}</span>
                                    {% endif %}
                                </td>
                                <td class="col-sm-5">
                                    {{ compute.details|default:"" }}
                                </td>
                                <td class="col-sm-2 text-center">
                                    <div class="btn-group">                    
                                        <a class="btn btn-outline-primary" title="{%trans "Edit" %}" href="{% url 'compute_update' compute.id %}">{% icon 'pencil' %}</a>
                                        <a class="btn btn-outline-danger" title="{%trans "Delete" %}" href="{% url 'compute_delete' compute.id %}">{% icon 'times' %}</a>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{% endblock content %}

{% block script %}
    <link href="{% static 'css/jquery.dataTables.min.css' %}" rel="stylesheet">
    <script type="text/javascript" src="{% static 'js/jquery.dataTables.min.js' %}"></script>
    {% comment %} <script type="text/javascript" src="{% static 'js/dataTables.bootstrap.min.js' %}"></script> {% endcomment %}
    <script>
        $('#computesTable').DataTable({
            autoWidth:true,////不开启自动宽度，用bootstrap的自适应去调整
            "lengthMenu": [10, 20, 50, 100],//表格行数选择框内数目 显示2条,4条,20条,50条
            "displayLength": 10,//默认的显示行数 (也就是每页显示几条数据)
            "order": [],
            "language": {//自定义语言提示
                "processing": "处理中...",
                "lengthMenu": "显示 _MENU_ 项结果",
                "zeroRecords": "没有找到相应的结果",
                "info": "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
                "infoEmpty": "第 0 至 0 项结果，共 0 项",
                "infoFiltered": "(由 _MAX_ 项结果过滤)",
                "search": "搜索",
                "infoPostFix": "",
                "url": "",
                "thousands": "'",
                "emptyTable": "表中数据为空",
                "loadingRecords": "载入中...",
                "infoThousands": ",",
                "paginate": {
                    "first": "首页",
                    "previous": "上页",
                    "next": "下页",
                    "last": "末页"
                }
            }
        });
    </script>
{% endblock script %}
